import React from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { useTheme } from "@/contexts/ThemeContext";
import { createStyles } from "../styles";
import { GroupNotificationItem, NotificationAction } from "../types";
import { formatTimestamp } from "../utils";

interface NotificationContentProps {
  item: GroupNotificationItem;
  onAction: (id: string, action: NotificationAction) => void;
}

const NotificationContent: React.FC<NotificationContentProps> = ({
  item,
  onAction,
}) => {
  const { colors } = useTheme();
  const styles = createStyles();

  // 处理群名称过长的情况
  const formatGroupName = (name: string) => {
    return name.length > 15 ? `${name.substring(0, 12)}...` : name;
  };

  // 渲染时间戳
  const renderTimestamp = () => (
    <Text style={[styles.timestamp, { color: colors.text.secondary }]}>
      {formatTimestamp(item.timestamp)}
    </Text>
  );

  switch (item.type) {
    case "dissolution":
      return (
        <View>
          <Text
            style={[styles.notificationText, { color: colors.text.primary }]}
            numberOfLines={2}
            ellipsizeMode="tail"
          >
            群聊 "{formatGroupName(item.groupName)}" 已被解散
          </Text>
          <View style={styles.bottomRow}>
            {renderTimestamp()}
            {item.status !== "processed" && (
              <TouchableOpacity
                style={[
                  styles.actionButton,
                  { backgroundColor: colors.primary },
                ]}
                onPress={() => onAction(item.id, "confirm")}
              >
                <Text style={styles.actionButtonText}>我知道了</Text>
              </TouchableOpacity>
            )}
          </View>
        </View>
      );

    case "invitation":
      return (
        <View>
          <Text
            style={[styles.notificationText, { color: colors.text.primary }]}
            numberOfLines={2}
            ellipsizeMode="tail"
          >
            {item.senderName} 邀请你加入群聊 "{formatGroupName(item.groupName)}"
          </Text>
          <View style={styles.bottomRow}>
            {renderTimestamp()}
            {item.status !== "processed" && (
              <View style={styles.actionButtonsRow}>
                <TouchableOpacity
                  style={[
                    styles.actionButton,
                    { backgroundColor: colors.primary },
                  ]}
                  onPress={() => onAction(item.id, "accept")}
                >
                  <Text style={styles.actionButtonText}>接受</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={[
                    styles.actionButton,
                    { backgroundColor: colors.backgroundLight },
                  ]}
                  onPress={() => onAction(item.id, "reject")}
                >
                  <Text
                    style={[
                      styles.actionButtonText,
                      { color: colors.text.primary },
                    ]}
                  >
                    拒绝
                  </Text>
                </TouchableOpacity>
              </View>
            )}
          </View>
        </View>
      );

    case "join_request":
      return (
        <View>
          <Text
            style={[styles.notificationText, { color: colors.text.primary }]}
            numberOfLines={2}
            ellipsizeMode="tail"
          >
            {item.senderName} 申请加入群聊 "{formatGroupName(item.groupName)}"
          </Text>

          {/* 渲染申请理由，如果存在的话 */}
          {item.content && (
            <View style={styles.reasonContainer}>
              <Text
                style={[styles.reasonLabel, { color: colors.text.secondary }]}
              >
                申请理由:
              </Text>
              <Text
                style={[styles.reasonText, { color: colors.text.primary }]}
                numberOfLines={2}
                ellipsizeMode="tail"
              >
                {item.content}
              </Text>
            </View>
          )}

          <View style={styles.bottomRow}>
            {renderTimestamp()}
            {item.status !== "processed" && (
              <View style={styles.actionButtonsRow}>
                <TouchableOpacity
                  style={[
                    styles.actionButton,
                    { backgroundColor: colors.primary },
                  ]}
                  onPress={() => onAction(item.id, "accept")}
                >
                  <Text style={styles.actionButtonText}>同意</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={[
                    styles.actionButton,
                    { backgroundColor: colors.backgroundLight },
                  ]}
                  onPress={() => onAction(item.id, "reject")}
                >
                  <Text
                    style={[
                      styles.actionButtonText,
                      { color: colors.text.primary },
                    ]}
                  >
                    拒绝
                  </Text>
                </TouchableOpacity>
              </View>
            )}
          </View>
        </View>
      );

    case "role_promoted":
      return (
        <View>
          <Text
            style={[styles.notificationText, { color: colors.text.primary }]}
            numberOfLines={2}
            ellipsizeMode="tail"
          >
            你在群聊 "{formatGroupName(item.groupName)}" 中被提升为
            {item.roleChange?.newRole === "admin" ? "管理员" : "成员"}
          </Text>
          <View style={styles.bottomRow}>
            {renderTimestamp()}
            {item.status !== "processed" && (
              <TouchableOpacity
                style={[
                  styles.actionButton,
                  { backgroundColor: colors.primary },
                ]}
                onPress={() => onAction(item.id, "confirm")}
              >
                <Text style={styles.actionButtonText}>我知道了</Text>
              </TouchableOpacity>
            )}
          </View>
        </View>
      );

    case "role_demoted":
      return (
        <View>
          <Text
            style={[styles.notificationText, { color: colors.text.primary }]}
            numberOfLines={2}
            ellipsizeMode="tail"
          >
            你在群聊 "{formatGroupName(item.groupName)}" 中被取消
            {item.roleChange?.oldRole === "admin" ? "管理员" : "成员"}身份
          </Text>
          <View style={styles.bottomRow}>
            {renderTimestamp()}
            {item.status !== "processed" && (
              <TouchableOpacity
                style={[
                  styles.actionButton,
                  { backgroundColor: colors.primary },
                ]}
                onPress={() => onAction(item.id, "confirm")}
              >
                <Text style={styles.actionButtonText}>我知道了</Text>
              </TouchableOpacity>
            )}
          </View>
        </View>
      );

    default:
      return null;
  }
};

export default NotificationContent;
